<template>
  <div class="app-container user">
    <AppSearchForm
      v-model:filter="filter"
      :add-permission-key="'AbpIdentity.Users.Create'"
      @handle-search="handleSearch"
      @handle-add="handleAdd"
      @handle-clear="handleClear"
    />
    <PaginationCard
      v-model:current-page="paginationData.currentPage"
      v-model:page-size="paginationData.pageSize"
      :load-list="getTableData"
      :total="paginationData.total"
    >
      <AppTable
        v-loading="isLoading"
        :data="tableData"
        :columns="columns"
        border
      />
    </PaginationCard>
    <UserForm
      v-model:edit-id="editId"
      v-model:visible="visible"
      @success="handleSuccess"
    />
    <PermissionsDialog
      ref="permissionsDialog"
      v-model:edit-id="editId"
      v-model:visible="permissionsDialogVisible"
      provider-name="U"
      @success="permissionsDialogVisible = false"
    />
    <ClaimDialog
      v-model:visible="claimDialogVisible"
      v-model:edit-id="editId"
      id-key="userId"
      :get-current-claims="getUserClaims"
      :get-all-claim-types="getAllUserClaimTypes"
      :set-claims="setUserClaims"
      @success="claimDialogVisible = false"
    />
  </div>
</template>

<script lang="tsx" setup>
import { computed, onMounted, ref } from 'vue'

import AppButtonGroup from '@/components/AppButtonGroup/index.vue'
import { IButtonConfig } from '@/components/AppButtonGroup/type'
import AppSearchForm from '@/components/AppSearchForm/index.vue'
import AppTable from '@/components/AppTable/index.vue'
import ClaimDialog from '@/components/ClaimDialog/index.vue'
import PaginationCard from '@/components/PaginationCard/index.vue'
import PermissionsDialog from '@/components/PermissionsDialog/index.vue'
import usePagination from '@/hooks/usePagination'
import { IUser } from '@/http/types/user'
import {
  deleteUser,
  getAllUserClaimTypes,
  getUserClaims,
  getUsers,
  setUserClaims,
} from '@/http/user'
import { parseDate2Str } from '@/utils/timeUtils'

import UserForm from './UserForm.vue'

const buttonConfig: IButtonConfig[] = [
  {
    name: '修改',
    eventName: 'handleEdit',
    type: 'primary',
    permissionKey: 'AbpIdentity.Users.Update',
  },
  {
    name: '权限',
    eventName: 'handleRole',
    type: 'primary',
    permissionKey: 'AbpIdentity.Users.ManagePermissions',
  },
  {
    name: '声明',
    eventName: 'handleClaim',
    type: 'primary',
  },
  {
    name: '删除',
    eventName: 'handleDelete',
    type: 'primary',
    isConfirm: true,
    confirmMessage: '删除该用户, 是否继续?',
    permissionKey: 'AbpIdentity.Users.Delete',
  },
]
const columns = ref([
  { label: '登录名', prop: 'userName' },
  { label: '姓名', prop: 'name' },
  { label: '邮箱地址', prop: 'email' },
  { label: '手机号', prop: 'phoneNumber' },
  {
    label: '创建时间',
    prop: 'creationTime',
    formatter: (row: IUser) => parseDate2Str(row.creationTime),
  },
  {
    label: '启用',
    prop: 'isActive',
    formatter: (row: IUser) => (row.isActive ? '是' : '否'),
  },
  {
    label: '操作',
    fixed: 'right',
    render: ({ row }: { row: IUser }) => {
      return (
        <AppButtonGroup
          rowData={row}
          buttonConfigs={buttonConfig}
          onEvent={(eventName: string) => {
            eventName === 'handleEdit' && handleEdit(row)
            eventName === 'handleRole' && handleRole(row)
            eventName === 'handleDelete' && handleDelete(row)
            eventName === 'handleClaim' && handleClaim(row)
          }}
        ></AppButtonGroup>
      )
    },
  },
])

const permissionsDialogVisible = ref(false)

const filter = ref('')

const visible = ref(false)
const handleAdd = () => {
  visible.value = true
}

const handleClear = () => {
  filter.value = ''
  handleSearch()
}

const params = computed(() => {
  return {
    filter: filter.value,
  }
})
const {
  isLoading,
  paginationData,
  tableData,
  getTableData,
  handleSearch,
  // handleSortChange
} = usePagination(getUsers, params)

onMounted(() => {
  getTableData()
})

const handleEdit = (row: IUser) => {
  editId.value = row.id || ''
  visible.value = true
}

const handleDelete = async (row: IUser) => {
  const id = row.id
  await deleteUser(id)
  await getTableData()
}

const editId = ref('')

// const permissionsDialog = ref<InstanceType<typeof PermissionsDialog>|null>(null)
const handleRole = (row: IUser) => {
  editId.value = row.id || ''
  permissionsDialogVisible.value = true
}
const handleSuccess = () => {
  visible.value = false
  getTableData()
}

const claimDialogVisible = ref(false)
const handleClaim = (row: IUser) => {
  editId.value = row.id
  claimDialogVisible.value = true
}
</script>

<style lang="scss" scoped></style>
